<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" style="line-height: 40px">
        <div style="display: flex">
          <div style="width: 50px; font-weight: 900">地区：</div>
          <div style="width: 80px">
            <a-select v-model="queryParam.city" @change="selectCity" placeholder="请选择城市">
              <a-select-option v-for="d in citys" :key="d.value">{{ d.label }}</a-select-option>
            </a-select>
          </div>
          <div style="width: calc(100% - 140px); text-align: left; margin-left: 10px">
            <a-row :gutter="24">
              <a-col :span="2" @click="selectCountry(null)" :style="{ color: countryFlag ? '#000' : '#1890ff' }"
                >全部</a-col
              >
              <a-col
                v-for="d in countrys"
                :key="d.value"
                :style="{ color: countryFlag !== d.value ? '#000' : '#1890ff' }"
                :span="2"
                @click="selectCountry(d)"
                >{{ d.label }}</a-col
              >
            </a-row>
            <a-row v-if="towns && towns.length > 0" :gutter="24" style="background-color: #f3f3f3">
              <a-col
                v-for="d in towns"
                :key="d.value"
                :span="3"
                :style="{ color: townFlag !== d.value ? '#000' : '#1890ff' }"
                @click="selectTwon(d)"
                >{{ d.label }}</a-col
              >
            </a-row>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 50px; font-weight: 900">面积：</div>
          <div style="width: 80px">&nbsp;</div>
          <div style="width: calc(100% - 140px); text-align: left; margin-left: 10px">
            <a-col :span="1" @click="selectMianji(null)" :style="{ color: mianjiFlag ? '#000' : '#1890ff' }"
              >全部</a-col
            >
            <a-col
              v-for="(d, index) in mianjis"
              :key="d.value"
              :span="index === 5 || index === 4 || index === 3 ? 3 : 2"
              :style="{ color: mianjiFlag !== d.value ? '#000' : '#1890ff' }"
              @click="selectMianji(d)"
              >{{ d.lable }}</a-col
            >
            <a-col style="text-align: center" :span="6">
              <a-input-number :min="0" :max="1000000" :step="0.01" placeholder="" v-model="mianji1"></a-input-number>-
              <a-input-number :min="0" :max="1000000" :step="0.01" placeholder="" v-model="mianji2"></a-input-number>
            </a-col>
          </div>
        </div>

        <a-row :gutter="24" style="margin-top: 20px">
          <template v-if="toggleSearchStatus">
            <a-col :span="4">
              <a-form-item label="店铺名称">
                <a-input :span="2" placeholder="请输入店铺名称" v-model="queryParam.title"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="店铺地址">
                <a-input :span="2" placeholder="请输入店铺地址" v-model="queryParam.address"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="联系人">
                <a-input :span="2" placeholder="请输入联系人" v-model="queryParam.uname"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="联系电话">
                <a-input placeholder="请输入联系电话" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="doFind" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="title" slot-scope="text, record, index">
          <a-row :span="9">
            <a-col :span="5" style="padding-top: 20px">
              <a-avatar v-if="record" shape="square" :size="120" :src="record ? record.imageUrl : ''" />
              <div v-else>
                <a-avatar
                  v-if="record && (record.imageUrl === '' || record.imageUrl === null || record.imageUrl === undefined)"
                  shape="square"
                  :size="120"
                  icon="user"
                />
              </div>
            </a-col>
            <a-col
              :span="4"
              style="line-height: 24px; padding-top: 15px; margin-left: 40px; width: 320px; white-space: pre-wrap"
            >
              <a target="_blank" :href="record ? record.cuurl : ''" style="color: #000c17">
                <div style="font-weight: 900; padding-right: 20px">{{ record ? record.title : '' }}</div>
              </a>
              <div>{{ record ? '编号：：' + record.houseId : '' }}</div>
              <div>{{ record ? '行业：' + record.hangye : '' }}</div>
              <div>
                {{
                  record ? '位置：' + record.city + ' ' + record.area + '-' + record.ranges + ' ' + record.address : ''
                }}
              </div>
              <div>{{ record ? '标签：' + record.jianjie : '' }}</div>
            </a-col>
          </a-row>
        </template>

        <template slot="areaNum" slot-scope="text, record, index">
          <div style="line-height: 30px">
            <div>{{ record ? record.rizujin : '' }}</div>
            <div>{{ record ? '租金：' + record.yuezujin : '' }}</div>
            <div>{{ record ? '面积：' + record.areaNum : '' }}{{ record ? record.areaUnit : '' }}</div>
            <div>{{ record ? '' + record.zrprice : '' }}</div>
          </div>
        </template>

        <template slot="dataType" slot-scope="text, record, index">
          <div style="line-height: 30px">
            <div>{{ record ? record.dataType : '' }}</div>
          </div>
        </template>
        <template slot="keyCustomers" slot-scope="text, record, index">
          <a-switch
            @change="enableKeyCus($event, record)"
            checked-children="是"
            un-checked-children="否"
            :default-checked="record && record.keyCustomers === 1"
          />
        </template>
        <template slot="uname" slot-scope="text, record, index">
          <div style="line-height: 30px">
            <div>{{ record ? '来源：' + record.source : '' }}</div>
            <div>{{ record ? '联系人：' + record.uname : '' }}</div>
            <div
              v-if="record.phone !== null"
              ref="ttp"
              style="color: red"
              class="test"
              @click="showPhone($event, record)"
            >
              {{ record ? '联系电话：' + record.phone.substr(0, 3) + '****' + record.phone.substr(7) : '' }}
            </div>
            <div v-if="record.phone == null">{{ record ? '联系电话：' : '' }}</div>
            <a-icon @click="editIconClick(record)" v-if="editIconId !== record.id" type="edit" />
            <a-input
              style="width: 120px"
              v-if="editInputId === record.id"
              v-model="editModel.phone"
              placeholder="请输入用户电话"
            ></a-input>
            <!-- <a-button @click="editInputClick(record)" v-if="editInputId === record.id" style="margin-left:10px;"type="primary">确定</a-button> -->
            <a-button-group v-if="editInputId === record.id" style="margin-left: 10px">
              <a-button @click="editIconClick(record, 'cancel')">取消</a-button>
              <a-button type="primary" @click="editInputClick(record)">确定</a-button>
            </a-button-group>
          </div>
        </template>
        <template slot="remark" slot-scope="text, record, index">
          <div>
            {{ text }}
            <a-icon @click="editRemarkIconClick(record)" v-if="editRemarkIconId !== record.id" type="edit" />
            <a-input
              style="width: 120px"
              v-if="editRemarkInputId === record.id"
              v-model="editModel.remark"
              placeholder="请输入备注"
            ></a-input>
            <!-- <a-button @click="editRemarkInputClick(record)" v-if="editRemarkInputId === record.id" style="margin-left:10px;" type="primary">确定</a-button> -->
            <a-button-group style="margin-left: 10px" v-if="editRemarkInputId === record.id" type="primary">
              <a-button @click="editRemarkIconClick(record, 'cancel')">取消</a-button>
              <a-button type="primary" @click="editRemarkInputClick(record)">确定</a-button>
            </a-button-group>
          </div>
        </template>
        <template slot="cuurl" slot-scope="text, record, index">
          <a target="_blank" :href="record ? record.cuurl : ''">查看</a>
        </template>
      </a-table>
    </div>

    <!--    <sc-system-shop-modal ref="modalForm" @ok="modalFormOk"></sc-system-shop-modal>-->
  </a-card>
</template>

<script>
// import '@/assets/less/TableExpand.less'
import { httpAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import ScSystemShopModal from './modules/ScSystemShopModal'
import { getAction } from '@api/manage'
export default {
  name: 'ScSystemShopList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    // ScSystemShopModal
  },
  data() {
    return {
      description: 'sc_system_shop管理页面',
      // 表头
      columns: [
        {
          title: '店铺信息',
          align: 'left',
          dataIndex: 'title',
          width: 480,
          scopedSlots: {
            customRender: 'title',
          },
        },
        {
          title: '物业情况',
          align: 'left',
          dataIndex: 'areaNum',
          scopedSlots: {
            customRender: 'areaNum',
          },
        },
        {
          title: '外网更新时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '更新数据时间',
          align: 'center',
          dataIndex: 'contactTime',
        },
        {
          title: '店铺类型',
          align: 'center',
          dataIndex: 'dataType',
        },
        // {
        //   title: '重要客户',
        //   align: "left",
        //   dataIndex: 'keyCustomers',
        //   scopedSlots: {
        //     customRender: 'keyCustomers'
        //   }
        // },
        {
          title: '业主信息',
          align: 'left',
          dataIndex: 'uname',
          scopedSlots: {
            customRender: 'uname',
          },
        },
        {
          title: '备注',
          align: 'left',
          dataIndex: 'remark',
          scopedSlots: {
            customRender: 'remark',
          },
        },
        {
          title: '详情',
          align: 'left',
          dataIndex: 'cuurl',
          scopedSlots: {
            customRender: 'cuurl',
          },
        },
      ],
      url: {
        city: '/shop/scSystemShop/selectCityData',
        edit: '/shop/scSystemShop/edit',
        hangye: '/shop/scSystemShop/selectHangye',
        list: '/shop/scSystemShop/list',
      },
      editIconId: null,
      editInputId: null,
      editRemarkIconId: null,
      editRemarkInputId: null,
      editModel: {
        phone: null,
        remark: null,
        id: null,
        isContact: null,
      },
      citys: [],
      countrys: [],
      towns: [],
      hangyes: [],
      countryFlag: null,
      hangyeFlag: null,
      mianjiFlag: null,
      townFlag: null,
      mianji1: undefined,
      mianji2: undefined,
      mianjis: [
        {
          lable: '20m²以下',
          value: '0-20',
        },
        {
          lable: '20-50m²',
          value: '20-50',
        },
        {
          lable: '50-100m²',
          value: '50-100',
        },
        {
          lable: '100-200m²',
          value: '100-200',
        },
        {
          lable: '200-500m²',
          value: '200-500',
        },
        {
          lable: '500-1000m²',
          value: '500-1000',
        },
        {
          lable: '1000m²以上',
          value: '1000-100000000',
        },
      ],
      dictOptions: {},
      superFieldList: [],
      queryParam: {
        dt: 'YES',
      },
    }
  },
  // beforeCreate(){
  //   this.queryParam.city = '北京'
  // },
  created() {
    // this.getSuperFieldList();
    let that = this
    // this.queryParam.city = '北京'
    this.loadCity(-1, 1, function () {
      that.queryParam.city = that.citys[0].value
      that.queryParam.cityName = that.citys[0].label
      that.loadCity(that.citys[0].value, 2)
    })
    this.loadHangye()
  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    searchReset(e) {
      let that = this
      that.mianji1 = null
      that.mianji2 = null
    },
    showPhone(e, type) {
      console.log(this.$refs.ttp.innerText)

      console.log(e.target.innerText)
      console.log(e)

      if (e.target.innerText.indexOf('*') != -1) {
        e.target.innerText = '联系电话：' + type.phone
      } //console.log(type.phone)
    },
    editInputClick(e) {
      let that = this
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!myreg.test(this.editModel.phone)) {
        this.$message.error('请输入正确的手机号')
      } else {
        httpAction(this.url.edit, this.editModel, 'put')
          .then((res) => {
            if (res.success) {
              that.searchQuery()
              that.$message.success(res.message)
              that.$emit('ok')
              that.editIconId = null
              that.editInputId = null
              that.editRemarkInputId = null
              that.editRemarkIconId = null
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            // that.confirmLoading = false;
          })
      }
    },

    editIconClick(e, type) {
      this.editRemarkIconId = null
      this.editRemarkInputId = null
      if (type === 'cancel') {
        this.editIconId = null
        this.editInputId = null
        this.editModel = {
          phone: null,
          remark: null,
          id: null,
          isContact: null,
        }
      } else {
        this.editIconId = e.id
        this.editInputId = e.id
        this.editModel = {
          phone: e.phone,
          remark: null,
          id: e.id,
          isContact: 1,
        }
      }
    },
    editRemarkInputClick(e) {
      let that = this
      if (this.editModel === null || this.editModel === undefined || this.editModel === '') {
        this.$message.error('请输入备注')
      } else {
        httpAction(this.url.edit, this.editModel, 'put')
          .then((res) => {
            if (res.success) {
              that.searchQuery()
              that.$message.success(res.message)
              that.$emit('ok')
              that.editIconId = null
              that.editInputId = null
              that.editRemarkInputId = null
              that.editRemarkIconId = null
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            // that.confirmLoading = false;
          })
      }
    },

    editRemarkIconClick(e, type) {
      this.editIconId = null
      this.editInputId = null
      if (type === 'cancel') {
        this.editRemarkIconId = null
        this.editRemarkInputId = null
        this.editModel = {
          phone: null,
          remark: null,
          id: null,
          isContact: null,
        }
      } else {
        this.editRemarkIconId = e.id
        this.editRemarkInputId = e.id
        this.editModel = {
          phone: null,
          remark: e.remark,
          id: e.id,
          isContact: null,
        }
      }
    },
    enableKeyCus(e, obj) {
      console.log(e, obj)
      let that = this
      httpAction(this.url.edit, { id: obj.id, keyCustomers: e ? 1 : 0 }, 'put')
        .then((res) => {
          if (res.success) {
            that.searchQuery()
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          // that.confirmLoading = false;
        })
    },
    doFind() {
      if (this.mianji1 || this.mianji2) {
        this.mianjiFlag = '@'
        let str = '0'
        if (this.mianji1) {
          str = this.mianji1
        }
        if (this.mianji2) {
          str += '-' + this.mianji2
        } else {
          str += '-10000000000'
        }
        this.queryParam.mianji = str
      }
      this.searchQuery()
      console.log('---------------------------', this.mianji1, this.mianji2)
    },
    loadCity(pid, level, callback) {
      let that = this
      getAction(this.url.city, {
        parentId: pid,
        level: level,
      })
        .then((res) => {
          if (res.success) {
            if (level === 1) {
              that.citys = res.result
              that.countrys = []
              that.towns = []
              that.countryFlag = null
              // if (that.citys.length > 0) {
              //   this.selectCity(1)
              // }
            } else if (level === 2) {
              that.countrys = res.result
              that.towns = []
            } else if (level === 3) {
              that.towns = res.result
            }
            if (callback) {
              callback()
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          // this.loading = false
        })
    },
    loadHangye() {
      let that = this
      getAction(this.url.hangye, {})
        .then((res) => {
          if (res.success) {
            that.hangyes = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          // this.loading = false
        })
    },
    selectCity(e) {
      let that = this
      this.loadCity(e, 2, function () {
        that.queryParam.city = e
        for (var i = 0; i < that.citys.length; i++) {
          if (that.citys[i].value === e) {
            that.queryParam.cityName = that.citys[i].label
          }
        }
        that.queryParam.area = null
        that.queryParam.ranges = null
        that.countryFlag = null
        that.searchQuery()
      })
    },
    selectCountry(e) {
      console.log(e, '----------------------------------------')
      this.queryParam.area = e ? e.label : null
      this.countryFlag = e ? e.value : null
      this.townFlag = null
      this.loadCity(e ? e.value : -2, 3)
      this.queryParam.ranges = null

      this.searchQuery()
    },
    selectTwon(e) {
      console.log(e)
      this.queryParam.ranges = e ? e.label : null
      this.townFlag = e ? e.value : null
      this.searchQuery()
    },
    selectHangye(e) {
      console.log(e)
      this.queryParam.hangye = e ? e.label : null
      this.hangyeFlag = e ? e.value : null
      this.searchQuery()
    },
    selectMianji(e) {
      console.log(e)
      this.queryParam.mianji = e ? e.value : null
      this.mianjiFlag = e ? e.value : null
      this.searchQuery()
    },
    initDictConfig() {},
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({
        type: 'string',
        value: 'houseId',
        text: '店铺编号',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'title',
        text: '店铺名称',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'imageUrl',
        text: '店铺图片',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'uid',
        text: '用户ID',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'userImg',
        text: '用户头像',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'uname',
        text: '用户昵称',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'phone',
        text: '用户电话',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'address',
        text: '位置',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'city',
        text: '城市',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'area',
        text: '区县',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'ranges',
        text: '地区',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'dataType',
        text: '店铺类型',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'cuurl',
        text: '详情链接',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'yuezujin',
        text: '月租金',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'rizujin',
        text: '日租金',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'zrprice',
        text: '转让费',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'areaNum',
        text: '面积',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'areaUnit',
        text: '面积单位',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'shopStatuss',
        text: '经营状态 -1 空置中 0 营业中',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'hangye',
        text: '经营类型',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'jianjie',
        text: '店铺简介',
        dictCode: '',
      })
      fieldList.push({
        type: 'Text',
        value: 'detailInfo',
        text: '店铺描述',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'orCode',
        text: '二维码',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'state',
        text: '100 待更新 ，200 商铺公海',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'keyCustomers',
        text: '是否是重要客户 0 不是 1 是',
        dictCode: '',
      })
      fieldList.push({
        type: 'string',
        value: 'source',
        text: '信息来源',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'isContact',
        text: '是否已经联系 0 未联系  1 已联系',
        dictCode: '',
      })
      fieldList.push({
        type: 'date',
        value: 'contactTime',
        text: '与客户联系时间',
      })
      fieldList.push({
        type: 'int',
        value: 'contactId',
        text: '联系人（员工）',
        dictCode: '',
      })
      fieldList.push({
        type: 'int',
        value: 'isDelete',
        text: '是否删除',
        dictCode: '',
      })
      fieldList.push({
        type: 'datetime',
        value: 'createTime',
        text: '创建时间',
      })
      fieldList.push({
        type: 'string',
        value: 'remark',
        text: '备注信息',
        dictCode: '',
      })
      this.superFieldList = fieldList
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
